/**
 * Created by Scott on 2017/3/27.
 */
// index.jsx 文件
import React from 'react'
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Link } from 'react-router-dom';

import $ from 'jquery';
import About from './page/About/About';
import Users from './component/Users';
import Home from './page/Home/Home';
import MenuManager from './page/MenuManager/MenuManager';
import './main.less';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
const {SubMenu} = Menu;
const {Header, Content, Sider} = Layout;
class App extends React.Component {

    constructor ( props ) {
        super(props);
        this.state = {
            current: '1',
            openKeys: []
        };
        this.handleClick = this.handleClick.bind(this);
        this.onOpenChange = this.onOpenChange.bind(this);
        this.logout = this.logout.bind(this);
    }

    handleClick ( e ) {
        window.location.hash = e.key; // 被点击元素的‘key’的值‘about’就是页面跳转的路径
        console.log('Clicked: ', e);
        this.setState({current: e.key});
    };

    onOpenChange ( openKeys ) {
        this.setState({openKeys: openKeys});
    };

    logout () {
        $.ajax({
            type: "GET",
            url: "/logout",
            dataType: 'json',
            success: function ( result ) {
                console.info(result);
            },
            error: function ( result ) {

            }
        });
        window.location.reload();
    }


    render () {
        return (
            <Router>
                <Layout>
                    <Header className="header">
                        <div className="logo">
                            内部管理系统
                        </div>
                        <div className="header-operation">
                            <Menu
                                theme="dark"
                                mode="horizontal"
                                onClick={this.logout}
                                defaultSelectedKeys={['2']}
                                style={{ lineHeight: '64px' }}
                            >
                                <Menu.Item key="lougout"><Icon type="logout"/></Menu.Item>
                            </Menu>
                        </div>
                    </Header>
                    <Layout>
                        <Sider width={200} style={{ background: '#fff' }}>
                            <Menu
                                mode="inline"
                                openKeys={this.state.openKeys}
                                selectedKeys={[this.state.current]}
                                style={{ height: '100%' }}
                                onOpenChange={this.onOpenChange}
                                onClick={this.handleClick}
                            >
                                <Menu.Item key="home"><span><Icon type="home"/>首页</span></Menu.Item>
                                <SubMenu key="setting" title={<span><Icon type="user" />项目管理</span>}>
                                    <Menu.Item key="project">项目</Menu.Item>
                                    <Menu.Item key="2">option2</Menu.Item>
                                    <Menu.Item key="3">option3</Menu.Item>
                                    <Menu.Item key="4">option4</Menu.Item>
                                </SubMenu>
                                <SubMenu key="sub2" title={<span><Icon type="laptop" />subnav 2</span>}>
                                    <Menu.Item key="5">option5</Menu.Item>
                                    <Menu.Item key="6">option6</Menu.Item>
                                    <Menu.Item key="7">option7</Menu.Item>
                                    <Menu.Item key="8">option8</Menu.Item>
                                </SubMenu>
                                <SubMenu key="sub3" title={<span><Icon type="notification" />系统配置</span>}>
                                    <Menu.Item key="user">用户管理</Menu.Item>
                                    <Menu.Item key="/menu">菜单管理</Menu.Item>
                                    <Menu.Item key="11">option11</Menu.Item>
                                    <Menu.Item key="12">option12</Menu.Item>
                                </SubMenu>
                                <Menu.Item key="about">关于</Menu.Item>
                            </Menu>
                        </Sider>
                        <Layout style={{padding: '0 24px 24px' ,minHeight:'650px' }}>
                            <Breadcrumb style={{ margin: '12px 0' }}>
                                <Breadcrumb.Item>Home</Breadcrumb.Item>
                                <Breadcrumb.Item>List</Breadcrumb.Item>
                                <Breadcrumb.Item>App</Breadcrumb.Item>
                            </Breadcrumb>
                            <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
                                <Route exact breadcrumbName="首页" path="/home" component={Home}/>
                                <Route exact breadcrumbName="关于" path="/about" component={About}/>
                                <Route exact breadcrumbName="用户管理" path="/user" component={Users}/>
                                <Route exact breadcrumbName="菜单管理" path="/menu" component={MenuManager}/>
                            </Content>
                        </Layout>
                    </Layout>
                </Layout>
            </Router>
        );
    }
}

ReactDOM.render((
    <App/>
), document.getElementById('root'));